<template>
    <el-drawer
        v-model="isShow"
        :title="title"
        :destroy-on-close="true"
        size="50%"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :show-close="false"
    >

        <DividerHeader title="警务人员列表"/>
        <DepartmentUserSelectTable :depId="policeUnitId"/>

        <el-row :gutter="24">
            <el-col :span="12">
                <DividerHeader title="警务人员列表"/>
                <DepartmentUserSelectTable :depId="policeUnitId"/>
            </el-col>
            <el-col :span="12">
                <DividerHeader title="辅警人员列表"/>
                <DepartmentUserSelectTable :depId="auxiliaryUnitId"/>
            </el-col>
        </el-row>

        <template #footer>
            <!-- 取消 -->
            <el-button @click="changeShowStatus">关闭</el-button>
        </template>
    </el-drawer>
</template>

<script setup>

import DividerHeader from "@/components/DividerHeader/DividerHeader.vue";
import useUserStore from "@/store/modules/user.js";
import {listDept} from "@/api/system/dept.js";
import DepartmentUserSelectTable from "@/components/DepartmentUserSelectTable/DepartmentUserSelectTable.vue";

const useStore = useUserStore()

const isShow = ref(false)
const title = ref('')
// 最大的部门 ID
const unitId = ref('')
// 警务部门 ID
const policeUnitId = ref('')
// 辅警部门 ID
const auxiliaryUnitId = ref('')

// 变更显示状态
const changeShowStatus = () => {
    isShow.value = !isShow.value
}

const showSelect = async (name) => {
    changeShowStatus()
    title.value = name
    unitId.value = useStore.info.unitId;
    const department = await listDept()
    // console.log(useStore.info.unitId)
    console.log(department)
    policeUnitId.value = formatDepartmentId(department, '法警部');
    auxiliaryUnitId.value = formatDepartmentId(department, '辅警部');
    console.log(formatDepartmentId(department, '法警部'))
}
defineExpose({showSelect})

// 优化部门 ID 获取
const formatDepartmentId = (data, depName) => {
    return data.data.filter(item => item.parentId === unitId.value && !item.isUnit && item.deptName === depName)?.[0].deptId
}

// 人员列表获取
</script>

<style scoped lang="scss">

</style>